<template>
  <BasicModal
    v-bind="$attrs"
    @ok="handleSubmint"
    :width="1200"
    okText="确定"
    @register="register"
    :title="props.title"
    @visible-change="handleVisibleChange"
  >
    <div class="tag-box">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键字搜索"
            style="width: 200px"
            :allowClear="true"
            @search="onSearch"
            v-if="isShowSearch"
          />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModal } from '/@/components/Modal';
  import { ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    isShowSearch: {
      type: Boolean,
      default: false,
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    warningTxt: {
      type: String,
      default: '请选择',
    },
    columnsProps: {
      type: Array,
      default: () => [],
    },
    tableParams: {
      type: Object,
      default: () => {
        return {
          api: '',
          params: {},
          rowKey: '',
          title: '',
          afterFetch: null,
        };
      },
    },
  });

  const [register] = useModal();
  const emit = defineEmits(['checkTag']);
  let searchValue = ref('');
  let isSearch = false;

  // 表单数据
  let columns = props.columnsProps as BasicColumn[];
  //   setSelectedRowKeys  设置选中行
  // getSelectRows 获取选择行
  // clearSelectedRowKeys 清空选中行
  const [
    registerTable,
    { getPaginationRef, setPagination, reload, getSelectRows, clearSelectedRowKeys },
  ] = useTable({
    title: props.tableParams.title,
    api: props.tableParams.api,
    immediate: false,
    columns,
    canResize: false,
    rowSelection: {
      type: props.isMultiple ? 'checkbox' : 'radio',
      checkStrictly: true,
    },
    showIndexColumn: false,
    clickToRowSelect:
      'clickToRowSelect' in props.tableParams ? props.tableParams.clickToRowSelect : true,
    rowKey: props.tableParams.rowKey,
    striped: true,
    bordered: true,
    fetchSetting: {
      pageField: 'PageNO',
      sizeField: 'PageSize',
      totalField: 'TotalRows',
      listField: 'Rows',
    },
    beforeFetch: () => {
      return [
        {
          SearchValue: isSearch ? searchValue.value : '',
          PageNO: getPaginationRef().current || 1,
          PageSize: getPaginationRef().pageSize || 50,
          ...props.tableParams.params,
        },
      ];
    },
    afterFetch: props.tableParams.afterFetch
      ? (v) => props.tableParams.afterFetch(v)
      : (v) => {
          return v;
        },
  });

  const { createMessage } = useMessage();
  // 搜索方法
  function onSearch() {
    isSearch = ['', null, undefined].indexOf(searchValue.value) === -1;
    setPagination({
      current: 1,
    });
    reload();
  }

  async function handleSubmint() {
    let res = await getSelectRows();
    if (res.length === 0) {
      createMessage.warning(props.warningTxt);
    } else {
      clearSelectedRowKeys();
      emit('checkTag', res);
    }
  }
  async function handleVisibleChange(visible) {
    if (visible) {
      setTimeout(() => {
        onSearch();
      }, 300);
    } else {
      clearSelectedRowKeys();
    }
  }
</script>

<style lang="less" scoped>
  .tag-box {
    width: 100%;
    position: relative;

    min-height: 600px;
    background-color: #fff;
  }
</style>
